<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script src="js/jquery-1.10.1.js"></script>
</head>
<body>
<div></div>
<form>
    用户名：<input type="text" name="name" onblur="ff()"/><span></span><br/>
    密码：<input type="password" name="pwd"/><br/>
    <input type="button" value="注册" onclick="register()"/>
</form>
<script>
    //校验用户名是否被占用
    function ff() {
        // 获取用户名输入框的value值
        var name = $("input[name='name']").val();
        //发送ajax请求验证用户名是否占用
        var xhr = new XMLHttpRequest();
        xhr.open("get","/ajaxday01/ajax/getOneUser?user.username="+name);
        xhr.send();
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4&&xhr.status==200){
                if(xhr.responseText==0){
                    $("span").html("用户名已被占用");
                }else{
                    if(name.trim().length==0){
                        $("span").html("用户名不能为空");
                    }else{
                        $("span").html("用户名合法")
                    }
                }
            }
        }
    }


    //注册
    // 1、事件绑定
    function register() {
        // 获取两个输入框的value值
        var name = $("input[name='name']").val();
        var pwd = $("input[name='pwd']").val();
        // 2、发送ajax请求
        // a、获取ajax核心对象
        var xhr = new XMLHttpRequest();
        // b、设置发送请求的格式和路径
        xhr.open("get","/ajaxday01/ajax/register?user.username="+name+"&user.password="+pwd);
        // c、发送ajax请求
        xhr.send();
        // d、监听readyState属性值的变化
        xhr.onreadystatechange=function () {
            // e、处理响应结果
            if(xhr.readyState==4&&xhr.status==200){
                // 3、根据响应结果渲染局部页面
                if(xhr.responseText==0){
                    $("form").hide();
                    $("div").html("注册成功");
                }else{
                    $("div").html("注册失败");
                }
            }
        }

    }
</script>
</body>
</html>